<template>
  <div class="app-container" v-loading="loading">
    <div>
      <el-button icon="Plus" type="primary"  @click="handleAdd" >添加一级分类  </el-button>
    </div>
    <vxe-table
        ref="tableRef"
        border
        style="margin-top: 10px;"
        align="center"
        :data="tableData"
        :height="tableHeight"
        :tree-config="{transform: true, expandAll: true,rowField: 'classifyId', parentField: 'parentId'}"
        :row-config="{isCurrent: true, isHover: true}"
        :checkbox-config="{ trigger:'row'}"
    >
      <vxe-column field="title" title="分类名称" tree-node ></vxe-column>
      <vxe-column field="status"  title="状态">
        <template v-slot="{row}">
          <el-tag v-if="row.status == 0">启用</el-tag>
          <el-tag v-else class="ml-2" type="danger">停用</el-tag>
        </template>
      </vxe-column>
      <vxe-column field="companyName"   title="公司名称" ></vxe-column>
      <vxe-column field="warehouseName"  title="仓库名称" ></vxe-column>
      <vxe-column field="createByName" title="创建人"></vxe-column>
      <vxe-column field="createTime" title="创建时间"></vxe-column>
      <vxe-column title="排序">
        <template #default="{row}">
            <el-button type="text" @click="clickMove(row.classifyId,0)" v-hasPermi="['commodity:classify:save']">上移</el-button>
            <el-button type="text" @click="clickMove(row.classifyId,1)" v-hasPermi="['commodity:classify:save']">下移</el-button>
            <el-button type="text" @click="clickMove(row.classifyId,2)" v-hasPermi="['commodity:classify:save']">置顶</el-button>
            <el-button type="text" @click="clickMove(row.classifyId,3)" v-hasPermi="['commodity:classify:save']">置底</el-button>
        </template>
      </vxe-column>
      <vxe-column title="操作" width="180" fixed="right" >
        <template #default="{row}">
          <el-button type="text" @click="clickEdit(row)" v-hasPermi="['commodity:classify:save']">编辑</el-button>
          <el-button type="text" v-if="row.level< 3" @click="clickAdd(row)" v-hasPermi="['commodity:classify:save']">添加</el-button>
          <el-button type="text" style="color:red"  @click="handleDelete(row)" v-hasPermi="['commodity:classify:delete']">删除</el-button>
        </template>
      </vxe-column>
    </vxe-table>
    <pagination
        v-show="total > 0"
        v-model:limit="queryParams.pageSize"
        v-model:page="queryParams.pageNum"
        :total="total"
        @pagination="getList"
    />
    <EditCategory v-if="isShowDialog" :title="title" :isShowDialog="isShowDialog" :parentData="parentData" :rowData="rowData" @cancel="handleClose"></EditCategory>
  </div>
</template>

<script setup>
import {onMounted, ref,nextTick} from "vue";
import {getSkuClassifyDelete, getSkuClassifyList, getSkuClassifyMove} from "@/api/scApi";
import EditCategory from "@/views/commodity/commodityCategory/componet/editCategory.vue";
import {flattenData} from "@/utils/shuangcheng";

const { proxy } = getCurrentInstance()
let queryParams=ref({
  pageNum: 1,
  pageSize: 10,
})
let tableHeight = ref(0);
const total=ref(0)
let loading=ref(false)
onMounted(() => {
  nextTick(() => {
    tableHeight.value = window.innerHeight - 300;
  })
  window.onresize = () => {
    tableHeight.value = document.body.scrollHeight - 300;
  }
  getList()
})

let isShowDialog=ref(false)
let isView=ref(false)
let title=ref("")
let parentData=ref({}) //新增用
let rowData=ref({}) //编辑用
function handleAdd(){
  let row={
    parentId:0,
    level:1
  }
  rowData.value={}
  parentData.value=row
  isShowDialog.value=true
}
let tableData = ref([ ])

function getList(){
  loading.value=true
  getSkuClassifyList({
    pageNum:queryParams.value.pageNum,
    pageSize:queryParams.value.pageSize,
    param:queryParams.value
  }).then(res => {
    loading.value=false
    let data=flattenData(res.data)
    tableData.value =data
    total.value = res.total
    nextTick(()=>{
      const $table =proxy.$refs.tableRef
      if ($table) {
        $table.setAllTreeExpand(true)
      }
    })

  }).finally(()=>{
    loading.value = false
  })
}


function clickEdit(row){
  title.value = "编辑分类";
  rowData.value =row
  isShowDialog.value=true
}

function clickAdd(row){

  rowData.value={}
  title.value = "添加分类"
  parentData.value= JSON.parse(JSON.stringify(row))
  parentData.value.level =row.level *1 +1
  isShowDialog.value=true
}

function handleDelete(row){
  deleteData([row.classifyId])
}
function deleteData(ids) {
  if (!ids || ids.length === 0) {
    return
  }
  proxy.$modal.confirm('是否确认删除该数据？').then(() => {
    getSkuClassifyDelete({ids: ids}).then(res => {
      if (res.code === 200) {
        getList();
        proxy.$modal.msgSuccess("删除成功");
      }
    })
  }).catch(() => {
  });
}

function clickMove(id,type){
  getSkuClassifyMove({
    classifyId:id,
    type:type
  }).then(res=>{
    if(res.code===200){
      getList()
    }
  })
}

function handleClose(isReload) {
  isShowDialog.value = false
  isView.value = false
  if (isReload) {
    getList()
  }
}


</script>

<style scoped lang="scss">

</style>